<template>
  <div class="external-num">
    <div class="tool">
      <div class="" style="float: left">
        <span class="main-color" @click = 'phoneCarFreshen'><i class="iconfont icon-shuaxin"></i><span>刷新</span></span>
        <el-input
          style="width: 300px"
          size="mini"
          placeholder="请输入状态名称进行查询"
          @input="handlerClick"
          v-model.trim="query">
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click="handlerClick">
          </i>
        </el-input>
      </div>
    </div>
    <div class="table-wapper">
      <el-table
        :data="phoneBarList"
        size="mini"
        stripe
        style="width: 100%">
        <el-table-column label="状态" prop = 'PhoneBarItemName'></el-table-column>
        <el-table-column label="状态编号">
          <template slot-scope="scope">
            编号：{{scope.row.PhoneBarItemId}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width = '150'>
          <template slot-scope="scope">
           <div :class = '[{systemButton: scope.row.IsSystemConfig === "1"}]'>
            <el-button @click="handleClick(scope)" type="text" size="small" :disabled = 'scope.row.IsSystemConfig === "1"' class = 'modify'>修改</el-button>
            <el-button type="text" size="small"  :disabled = 'scope.row.IsSystemConfig === "1"' :class = '[{oper: scope.row.IsEnable === "1"}]' @click = 'enableModify(scope)'>{{scope.row.IsEnable === "0" ? "启用" : "停用"}}</el-button>
           </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <left-slide :visible.sync='slideLeft' :title='"修改电话条"' :showFooter='true'  @cancelClick = 'slideCancelClick' @saveClick = 'slideSaveClick'>
      <div class = 'modifyPhoneBar'>
        <el-form :model="phoneBarForm" :rules="rules" ref="modifyBarForm" class = 'pbx-add__form'>
          <div class='modifyPhoneBar__input'>
            <p>名称</p>
            <el-form-item  prop="PhoneBarItemName">
              <el-input v-model="phoneBarForm.PhoneBarItemName"></el-input>
            </el-form-item>
          </div>
          <div class='modifyPhoneBar__input'>
            <span>是否停用：</span>
            <el-radio-group v-model="phoneBarForm.IsEnable">
              <el-radio :label="'1'">启用</el-radio>
              <el-radio :label="'0'">停用</el-radio>
            </el-radio-group>
          </div>
          <div class='modifyPhoneBar__input'>
            <p>编号</p>
              <el-input v-model="phoneBarForm.PhoneBarItemId" disabled></el-input>
          </div>
        </el-form>
      </div>
    </left-slide>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  import { deepClone } from '@/utils/m7Utils.js'
  import Pagination from '@/components/public-modules/card/Pagination'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  export default {
    name: 'phoneConfig',
    data () {
      return {
        name: 'phoneConfig',
        phoneBarList: [],
        copyBarList: [],
        query: '',
        slideLeft: false,
        phoneBarForm: {},
        rules: {
          PhoneBarItemName: [{ required: true, message: '请输入名称', trigger: 'blur' }, { min: 1, max: 8, message: '长度在 1 到 8个字符', trigger: 'change' }]
        }
      }
    },
    components: {
      Agent,
      Pagination,
      leftSlide
    },
    computed: {
      currentPBX () {
        return this.$store.state.config.callCenter.currentPBX
      },
      pbxList () {
        return this.$store.state.session.account.pbx
      }
    },
    watch: {
      currentPBX () {
        let routerName = this.$route.meta.title
        let comName = this.name
        if (routerName === comName) {
          this.phoneCarFreshen()
        }
      }
    },
    methods: {
      getPhoneBarList () {
        let currentPBX = this.currentPBX
        let PBX = this.$store.state.session.ivrMap[currentPBX]
        this.phoneBarList = deepClone(PBX.allPhoneBarConfig)
      },
      handleClick (item) {
        this.slideLeft = true
        this.phoneBarForm = deepClone(item.row)
      },
      handlerClick () {
        let resultArr = []
        let queryStr = this.query
        if (queryStr) {
          for (var i = 0; i < this.copyBarList.length; i++) {
            if (this.copyBarList[i].PhoneBarItemName.indexOf(queryStr) !== -1) {
              resultArr.push(this.copyBarList[i])
            }
          }
          this.phoneBarList = resultArr
        } else {
          this.phoneBarList = this.copyBarList
        }
      },
      phoneCarFreshen () {
        this.$store.dispatch('queryPhoneBarConfig', {PBX: this.currentPBX}).then((res) => {
          if (res.success) {
            this.phoneBarList = res.list
            this.copyBarList = res.list
          }
        })
      },
      savePhoneBarConfig (item) {
        let reqData = item || this.phoneBarForm
        this.$store.dispatch('savePhoneBarConfig', reqData).then((response) => {
          if (response.success) {
            this.phoneCarFreshen()
            this.$message.success('修改成功！')
            this.slideLeft = false
            this.query = ''
            this.phoneBarForm = {}
          }
        })
      },
      slideCancelClick () {
        this.slideLeft = false
        this.phoneBarForm = {}
      },
      slideSaveClick () {
        this.$refs['modifyBarForm'].validate((valid) => {
          if (valid) {
            this.savePhoneBarConfig()
          } else {
            return false
          }
        })
      },
      enableModify (item) {
        let reqData = item.row
        reqData.IsEnable === '0' ? reqData.IsEnable = '1' : reqData.IsEnable = '0'
        this.savePhoneBarConfig(reqData)
      }
    },
    deactivated () {
      this.backPBX = this.currentPBX
    },
    activated () {
      if (this.backPBX !== this.currentPBX) {
        this.phoneCarFreshen()
      }
    },
    beforeMount () {
      this.phoneCarFreshen()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .external-num
    height calc(100% - 48px)
    box-sizing border-box
    padding 20px
    overflow-y hidden
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    font-size: 12px;
    .margin-l-10
      margin-left 10px
    .pag-wapper
      position: absolute;
      right: 15px;
      top: 14px;
    .main-color
      color $c-main
      cursor pointer
      margin-right 20px
    .wapper
      display flex
      flex-direction column
    .tool
      position relative
      border 1px solid #e7e7eb
      border-bottom 0
      padding  12px 15px
      /*display flex*/
      justify-content space-between
    .primary_btn
      padding 0px 10px
      min-width 60px
    .del
      color $c-pink
    .systemButton
      .modify
        color #878787
    .oper
      color #FF6B6B
    .modifyPhoneBar
      padding 20px
      font-size 14px
      box-sizing border-box
      .modifyPhoneBar__input
        margin-bottom 20px
</style>

